<template>
  <div>
    <div class="account-search">
      <div class="account-input">
        <el-input v-model="input2" :placeholder="valueName">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-row style="margin: 10px 0;">
      <el-col :sm="4">
        <div class="g-title">故障报修数目({{total}}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align:right;padding: 5px 0 0 0;" v-show="rolesNode">
        <el-button type="primary" @click="add" size="small">新增</el-button>
        <el-button type="warning" @click.prevent="delData()" size="small">删除</el-button>
        <el-button type="success" @click.prevent="modify()" size="small">修改</el-button>
      </el-col>
    </el-row>

    <div class="table-top">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="标题" width="300" >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="toMallInfo(scope.$index,scope.row)"
            >{{ scope.row.title}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="报修单位" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="simpledetails" label="OBD设备号" width="200" align="center"></el-table-column>
        <el-table-column prop="createUserName" label="报修人" width="100" align="center"></el-table-column>
        <el-table-column prop="createUserMobile" label="联系电话" width="200" align="center"></el-table-column>
        <el-table-column prop="createtime" label="报修时间" width="200" align="center"></el-table-column>
      </el-table>

      <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNo"
            @current-change="fetchData"
            @size-change="pageSizeChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>

    <add
      :dialogVisible.sync="dialogVisible"
      :data="editData"
      :addMode="addMode"
      @finish="fetchData"
    ></add>
  </div>
</template>
<script>
import {
  listJson,
  changeIsRead,
  addFileUpload,
  findCompanys,
  findDetails
} from "@/api/infomaction";
import quill from "@/components/quill/index";
import { axios } from "@/api/axios";
import Add from "./components/add";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"])
  },
  components: {
    quill,
    Add
  },
  data() {
    return {
      valueName: "请输入标题名称",
      titleNode: "文件数目",
      rolesNode: false, //单位权限只有管理员和单位管理员可以为true
      tableData: [],
      editData: {},
      loginname: "",
      companyId: null, //单位id
      comid: null, //用户id
      userid: null, //用户id
      seeYes: null,
      articleIdData: [],
      multipleSelection: [],
      multipleSelection2: [],
      input2: "",
      currentPage: 1, //默认显示第一页
      total: 0,
      pageNo: 1,
      pageSize: 10, //默认每页显示10条
      total2: 0,
      pageNo2: 1,
      pageSize2: 10, //默认每页显示10条
      pageSize3: 10, //默认每页显示10条
      total3: 0,
      pageNo3: 1,
      pageSize2: 10, //默认每页显示10条
      totalNum2: 0, //第二个数组数目
      addMode: false, //是新增还是编辑模式
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        titleNode: "",
        IssuedBy: "",
        text: "",
        allcom: "",
        comids: null,
        id: "",
        fjname: "",
        companyName: "",
        createtime: "",
        fujianurl: "",
        textdetails: ""
      },
      input2: "" //搜索数据
    };
  },
  watch: {
    //监听左侧单位勾选 重新获取数据
    selectedComIds() {
      this.pageNo = 1;
      this.fetchData();
    }
  },
  created() {
    this.total = this.tableData.length;
    this.comid = this.userInfo.comid;
    this.userid = this.userInfo.userid;
    this.loginname = this.userInfo.loginname;
    this.fetchData();
    this.roles();
  },
  methods: {
    handleClose(done) {
      done();
    },
    roles() {
      if (this.userInfo.usertype == 1) {
        this.rolesNode = true;
      } else {
        this.userInfo.rolesName.forEach(e => {
          if (e == "dwgly") {
            this.rolesNode = true;
          }
        });
      }
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
      // console.log(val)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    search() {
      this.fetchData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 富文本
    textChange(d) {
      this.ruleForm.text = d;
    },
    xuanze() {
      this.dialogVisible2 = true;
    },
    add() {
      this.addMode = true;
      this.ruleForm.title = "";
      this.ruleForm.titleNode = "";
      this.ruleForm.IssuedBy = "";
      this.ruleForm.text = "";
      this.dialogVisible = true;
    },
    // 传输数据
    async toMallInfo(index, row) {
      this.$router.push({
        path: "/infomaction/viewregulations",
        // name: 'mallList',
        query: {
          id: row.id
        }
      });
    },
    fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      axios("/admin/file/findfiledownloads.do", "get", {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        title: this.input2,
        type: 5,
        companyId: this.comid
      }).then(data => {
        this.tableData = data.data;
        this.total = data.total;
      });
    },

    // 确定
    query() {
      if (this.multipleSelection2.length == 0) {
        this.$message("请选择");
        return;
      }
      let num = "";
      this.multipleSelection2.forEach(e => {
        // console.log(e)
        num += e.id + ",";
      });
      num =
        num.substring(num.length - 1) == ","
          ? num.substring(0, num.length - 1)
          : num;
      this.ruleForm.id = num;
      // console.log(this.ruleForm.id)
      this.ruleForm.allcom = 0;
      this.multipleSelection2.length == 0;
      this.dialogVisible2 = false;
    },

    //编辑完成回调

    // 删除
    delData() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择");
        return;
      }
      this.$confirm("是否确定删除数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          let val = this.multipleSelection;
          let nid = "";
          val.forEach(e => {
            nid += e.id + ",";
          });
          nid =
            nid.substring(nid.length - 1) == ","
              ? nid.substring(0, nid.length - 1)
              : nid;
          axios("/admin/file/removeFileDownload.do", "post", {
            articleIds: nid,
            type: 5
          }).then(data => {
            this.fetchData();
          });
        }
      });
    }, //  修改
    modify() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择");
        return;
      }
      this.editData = {
        id: this.multipleSelection[0].id,
        title: this.multipleSelection[0].title,
        simpledetails: this.multipleSelection[0].simpledetails,
        textdetails:this.multipleSelection[0].textdetails,
        // textdetails: this.multipleSelection[0].textdetails
      };
      this.$refs.multipleTable.clearSelection();
      this.addMode = false;
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.companybook-main {
  margin: 0 auto;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
}

.companybook-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #eef1f6;
  padding: 10px;
}

.g-title {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
  margin: 10px 0;
  display: inline-block;
}
</style>
